<!DOCTYPE html>
<html class="no-js hola-html-reset hola-var" lang="en">
<head>
  <meta charset="utf-8">
  <title>HolaKit</title>

  <meta name="description" content="">
  <meta name="generator" content="kss-node">
  <meta name="viewport" content="width=device-width">

  <link rel="stylesheet" href="kss-assets/kss.css">
  <link rel="stylesheet" href="/dist/holakit.css">

</head>
<body id="kss-node" class="hola-body-typography hola-grey-bg kss-fullscreen-mode">

<div class="kss-sidebar kss-style">
  <header class="kss-header">
    <h1 class="kss-doc-title">HolaKit</h1>
  </header>
  <nav class="kss-nav">
    <ul class="kss-nav__menu">
      <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="./">
          <span class="kss-nav__ref">0</span
          ><span class="kss-nav__name">Overview</span>
        </a>
      </li>
      <li class="kss-nav__menu-item">
        <a class="kss-nav__menu-link" href="section-components.html">
          <span class="kss-nav__ref">1</span><span class="kss-nav__name">Components</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<article role="main" class="kss-main">

    <div id="kssref-components-cards-basic" class="kss-section kss-section--depth-3 is-fullscreen">

      <div class="kss-style">
        <h3 class="kss-title kss-title--level-3">
          <a class="kss-title__permalink" href="#kssref-components-cards-basic">
            <span class="kss-title__ref">
              1.2.1
              <span class="kss-title__permalink-hash">
                  #Components - Cards - Basic
              </span>
            </span>
            Basic Card
          </a>
        </h3>

          <p class="kss-toolbar">
            <a href="#kssref-components-cards-basic" data-kss-guides="true">
              <span class="kss-toolbar__tooltip">Toggle example guides</span>
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
                <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
                <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
                <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
                <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
                <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
                <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
                <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
                <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
                <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
                <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
              </svg>
            </a>
            <a href="#kssref-components-cards-basic" data-kss-markup="true">
              <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
                <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
                <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
              </svg>
            </a>
          </p>

          <div class="kss-description">
            <p>Card components are blocks by default. We don't suggest using them as inlines or
inline-blocks. Normally you would just wrap cards in card stack or get them in
layouts so they won't get too wide. In some cases you want to wrap cards directly
in containers: Fine, but don't do it every where, since cards can be too wide for
desktop users. In the following example page, we explictly get a max width for
demostration purpose.</p>
<p>Cards can't be too narrow too; Because we have great padding around cards, if you
get 4 or more columns in a container, the whole page may looks too messy, and
lines in each column will be too short for a comfortable reading experience.</p>
<p>Of course titles are accepted in cards and you will use them frequently. We also
get head images for cards, and even pure image cards. Go ahead and make your app
vivid.</p>
<p>We have patched cards for being used in links; Feel free to use them as
clickable items, but don't use them as buttons. For example, you can use linked
cards as article items in a list page of blog, but don't use a card titled &quot;Click
Here&quot; as an action button. Card always contains some actual data, instead of pure
commands / verbs.</p>

          </div>

      </div>

        <div class="kss-modifier__wrapper">
          <div class="kss-modifier__heading kss-style">
            Example
          </div>


          <div class="kss-modifier__example">
            <div class="hola-card-stack" style="max-width: 300px">
  <div class="hola-card">
    <p>Basic Card Component</p>
    <p>俱往矣，数风流人物，还看今朝。</p>
  </div>
  <div class="hola-card">
    <h2 class="hola-card-title">Titled Card</h2>
    <p>Of course, cards can have a proper title.</p>
  </div>
  <div class="hola-card hola-card-with-image">
    <img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
    <h2 class="hola-card-title">Card with image</h2>
    <p>Card can comes with images. Make sure you have proper class set.</p>
  </div>
  <div class="hola-card hola-card-full-image">
    <img src="https://source.unsplash.com/featured/?sky" alt="Photo from Unsplash" class="hola-image">
  </div>
</div>

            <div class="kss-modifier__example-footer"></div>
          </div>

        </div>

          <details class="kss-markup kss-style">
            <summary>
                Markup: <code>components/card/card.html</code>
            </summary>
            <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;div class&#x3D;&quot;hola-card-stack&quot; style&#x3D;&quot;max-width: 300px&quot;&gt;
  &lt;div class&#x3D;&quot;hola-card&quot;&gt;
    &lt;p&gt;Basic Card Component&lt;/p&gt;
    &lt;p&gt;俱往矣，数风流人物，还看今朝。&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class&#x3D;&quot;hola-card&quot;&gt;
    &lt;h2 class&#x3D;&quot;hola-card-title&quot;&gt;Titled Card&lt;/h2&gt;
    &lt;p&gt;Of course, cards can have a proper title.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class&#x3D;&quot;hola-card hola-card-with-image&quot;&gt;
    &lt;img src&#x3D;&quot;https://source.unsplash.com/featured/?head&quot; alt&#x3D;&quot;Photo from Unsplash&quot; class&#x3D;&quot;hola-image&quot;&gt;
    &lt;h2 class&#x3D;&quot;hola-card-title&quot;&gt;Card with image&lt;/h2&gt;
    &lt;p&gt;Card can comes with images. Make sure you have proper class set.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class&#x3D;&quot;hola-card hola-card-full-image&quot;&gt;
    &lt;img src&#x3D;&quot;https://source.unsplash.com/featured/?sky&quot; alt&#x3D;&quot;Photo from Unsplash&quot; class&#x3D;&quot;hola-image&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
          </details>

        <div class="kss-source kss-style">
          Source: <code>components/card/card.css</code>, line 1
        </div>

    </div>
</article>

<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
  prettyPrint();
  var spy = new ScrollSpy('#kss-node', {
    nav: '.kss-nav__menu-child > li > a',
    className: 'is-in-viewport'
  });
  var kssFullScreen = new KssFullScreen({
    idPrefix: 'kss-fullscreen-',
    bodyClass: 'kss-fullscreen-mode',
    elementClass: 'is-fullscreen'
  });
  var kssGuides = new KssGuides({
    bodyClass: 'kss-guides-mode'
  });
  var kssMarkup = new KssMarkup({
    bodyClass: 'kss-markup-mode',
    detailsClass: 'kss-markup'
  });
</script>



<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
